<!--
 * @Author: your name
 * @Date: 2022-03-01 09:31:37
 * @LastEditTime: 2022-05-06 17:14:39
 * @LastEditors: 血雪球 wash0226@outlook.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\traceability-information-supplement\index.vue
// 配置溯源码图片
-->
<template>
  <baseMainSlot>
    <template v-slot:content>
      <div class="SRCImage">
        <h3>当前溯源码填充图片</h3>
        <img :src="SRCImage" />
      </div>
      <div class="addSRCImage">
        <h3>添加溯源码填充图片</h3>
        <UploadPics
          :disabled="!judgePermission(610, 'add')"
          ref="UploadPics"
          v-model="uploadFileList"
          :limit="1"
          accept=".jpg, .jpeg, .png"
          @input="handlerAddFileList($event, 'png')"
        />

        <!-- <EleUploadImage
          v-model="image"
          :response-fn="handleResponse"
          :before-remove="handleRemove"
          :headers="headers"
          :data="dataImg"
          :file-size="1"
          :action="ImageUrl()"
        /> -->
      </div>
    </template>
  </baseMainSlot>
</template>
<script>
import baseMainSlot from "@/components/BaseMainSlot/baseone.vue";
// import batchreq from "@/api/common-production/index";
// import ActionBar from "@/components/ActionBar";
import graApi from "@/api/trace-source-web/tracing-source-code/tracing-source-image";
// import axios from "axios";
import { getToken } from "@/utils/auth";
import { mymixin } from "@/utils/mixins";
// const cityOptions = this.batchList;
import UploadPics from "@/components/UploadPics/upload-img-list.vue";

export default {
  // eslint-disable-next-line vue/name-property-casing
  name: "tracingSourceImage",
  components: {
    baseMainSlot,
    UploadPics
    // ActionBar
  },
  mixins: [mymixin],
  data() {
    return {
      imgurl: "",
      // headers: {
      //   databaseName: getToken("databaseName"),
      //   // "databaseName": 'DB_TDW1_TENANT',
      //   accessToken: getToken("token"),
      //   organizationList: getToken("organizationList"),
      //   organizationNo: getToken("organizationNo")
      // },
      dataImg: {
        organizationNo: getToken("organizationNo")
      },
      SRCImage: "",
      image: null,
      uploadFileList: []
    };
  },
  mounted() {
    this.getbatchselect();
  },
  methods: {
    getbatchselect() {
      graApi.traceCodeImage(getToken("organizationNo")).then(res => {
        // console.log(res.data)
        let data = res.data;
        this.SRCImage = data[0]?.url;
      });
    },
    // 上传图片
    getFile(file) {
      // this.formData.url = file[0] ? file[0].name : ''
      // this.$set(this.formData, 'url', file[0] ? file[0].name : '')
      // this.$refs.formData.validateField(['url'], () => {})

      graApi.traceCodeImageAdd({
        url: file[0] ? file[0]?.name : 'https://t10.baidu.com/it/u=2178613570,2866529354&fm=58'
      }).then(res => {
        // console.log(res.data)
        let data = res.data;
        this.image = data.url;
        this.getbatchselect();
      });
    },
    // 添加-轮播图/视频
    handlerAddFileList(file, type) {
      if (type === 'png') {
        this.uploadFileList = [];
        graApi.traceCodeImageAdd({
          url: file?.list[0].url ? file.list[0].url : 'https://t10.baidu.com/it/u=2178613570,2866529354&fm=58'
        }).then(res => {
        // console.log(res.data)
          let data = res.data;
          this.image = data.url;
          this.getbatchselect();
        });
      }
    },
    handleRemove() {}
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  color: #000 !important;
}
::v-deep .el-form-item__content {
  .el-input__inner {
    color: #000 !important;
  }
}
::v-deep .common-layout {
  .zhcontent {
    height: 100% !important;
    display: flex;
  }
}
.SRCImage {
  height: 100%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #000;
  img {
    height: auto;
    width: 300px;
  }
}
.addSRCImage {
  height: 100%;
  width: 50%;
  display: flex;
  color: #000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
// 溯源码
.codeview {
  ::v-deep .el-dialog {
    width: 25% !important;
  }
}
::v-deep .el-upload--picture-card {
  // width: 40px;
  // height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #6ecae3;
}
::v-deep .el-upload--picture-card {
  position: relative;
  left: 50%;
  transform: translatex(-50%);
}
::v-deep .el-upload--picture-card .el-icon-plus {
  font-size: 34px;
  color: #6ecae3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-dialog__body {
  text-align: center;
}
.el-upload__tip {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
  position: absolute;
  width: 150px;
}
</style>
